<template>
  <div class="dashboard-container">
    <el-row :gutter="12" >
      <el-col :span="6">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 200px">

          <div style="border-bottom: 1px solid #f0f0f0;">
            <div style="margin-bottom: 10px;">
              用户数量
            </div>
          </div>

            <el-row :gutter="12" >
              <el-col :span="6">
                <div style="padding-bottom: 1rem;padding-left: 1rem;font-size: 33px;margin-top: 30px;">
                  <b>
                    {{userCount}}
                  </b>
                  
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <svg class="svgIcon" aria-hidden="true" style="margin-left: 160px;margin-top: 20px;">
                    <use xlink:href="#el-icon-xsqyonghu"></use>
                  </svg>
                </div>
 
              </el-col>
            </el-row>
            <p style="padding-left: 1rem;">在册用户总数量</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 200px">

          <div style="border-bottom: 1px solid #f0f0f0;">
            <div style="margin-bottom: 10px;">
              订单量
            </div>
          </div>

            <el-row :gutter="12" >
              <el-col :span="6">
                <div style="padding-bottom: 1rem;padding-left: 1rem;font-size: 33px;margin-top: 30px;">
                  <b>
                    {{orderCount}}
                  </b>
                  
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <svg class="svgIcon" aria-hidden="true" style="margin-left: 160px;margin-top: 20px;">
                    <use xlink:href="#el-icon-xsqlicaitouzi"></use>
                  </svg>
                </div>
 
              </el-col>
            </el-row>
            <p style="padding-left: 1rem;">今日订单量</p>
        </el-card>
      
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 200px">

          <div style="border-bottom: 1px solid #f0f0f0;">
            <div style="margin-bottom: 10px;">
              课程数量
            </div>
          </div>

            <el-row :gutter="12" >
              <el-col :span="6">
                <div style="padding-bottom: 1rem;padding-left: 1rem;font-size: 33px;margin-top: 30px;">
                  <b>
                    {{courseCount}}
                  </b>
                  
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <svg class="svgIcon" aria-hidden="true" style="margin-left: 160px;margin-top: 20px;">
                    <use xlink:href="#el-icon-xsqshuji"></use>
                  </svg>
                </div>
 
              </el-col>
            </el-row>
            <p style="padding-left: 1rem;">课程数量</p>
        </el-card>
      
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 200px">

          <div style="border-bottom: 1px solid #f0f0f0;">
            <div style="margin-bottom: 10px;">
              讲师数量
            </div>
          </div>

            <el-row :gutter="12" >
              <el-col :span="6">
                <div style="padding-bottom: 1rem;padding-left: 1rem;font-size: 33px;margin-top: 30px;">
                  <b>
                    {{teacherCount}}
                  </b>
                  
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <svg class="svgIcon" aria-hidden="true" style="margin-left: 160px;margin-top: 20px;">
                    <use xlink:href="#el-icon-xsqdangan"></use>
                  </svg>
                </div>
 
              </el-col>
            </el-row>
            <p style="padding-left: 1rem;">讲师数量</p>
        </el-card>
        
      </el-col>
    </el-row>
    <el-row :gutter="12" >
      <el-col :span="24">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 400px;margin-top: 20px;">
          <div style="width: auto;height: 380px" id="chart">
          </div>

        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="12" >
      <el-col :span="8">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 400px;margin-top: 20px;">
          <div style="width: auto;height: 380px" id="chart1">
          </div>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 400px;margin-top: 20px;">
          <div style="width: auto;height: 380px" id="chart2">
          </div>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="background: rgb(255,255,255);height: 400px;margin-top: 20px;">
          <div style="width: auto;height: 380px" id="chart3">
          </div>

        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from 'echarts'
import sta from '@/api/edu/sta'

export default {
  name: 'echarts',
  data(){
    return{
      userCount: '',
      courseCount: '',
      orderCount: '',
      viewCount: '',
      teacherCount: '',
      register_numList: '',
      date_calculatedList: '',
      video_view_numList: '',
      order_numList: '',
    }
  },
  mounted() {
    this.getAllData()
  },
  methods:{
    getAllData(){
      sta.getAllData().then(res=>{
        this.userCount = res.data.userCount
        this.courseCount = res.data.courseCount
        this.orderCount = res.data.orderCount
        this.viewCount = res.data.viewCount
        this.teacherCount = res.data.teacherCount
        this.register_numList = res.data.sevenMap.register_numList
        this.date_calculatedList = res.data.sevenMap.date_calculatedList
        this.video_view_numList = res.data.sevenMap.video_view_numList
        this.order_numList = res.data.sevenMap.order_numList
        this.showHistogram()
        this.showRose()
        this.showPie()
        this.showPolar()
      })
    },
    //极坐标
    showPolar(){
      this.chart = echarts.init(document.getElementById('chart3'))
      var option = {
        title: [
          {
            text: 'Tangential Polar Bar Label Position (middle)'
          }
        ],
        polar: {
          radius: [30, '80%']
        },
        angleAxis: {
          max: 100,
          startAngle: 75
        },
        radiusAxis: {
          type: 'category',
          data: ['今日注册人数', '今日新增课程数', '今日订单量', '今日新频观看量','今日新增讲师数']
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [this.userCount, this.courseCount, this.orderCount, this.viewCount,this.teacherCount],
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        }
      };
      this.chart.setOption(option)
    },
    //圆环
    showPie(){
      this.chart = echarts.init(document.getElementById('chart2'))
      var option = {
          tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.userCount, name: '今日注册人数' },
              { value: this.courseCount, name: '今日新增课程数' },
              { value: this.orderCount, name: '今日订单量' },
              { value: this.viewCount, name: '今日新频观看量' },
              { value: this.teacherCount, name: '今日新增讲师数' },
            ]
          }
        ]
      };
      this.chart.setOption(option)
    },
    //南丁格尔玫瑰图
    showRose(){
      this.chart = echarts.init(document.getElementById('chart1'))
      var option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 10
            },
            data: [
              { value: this.viewCount, name: '今日新频观看量' },
              { value: this.userCount, name: '今日注册人数' },
              { value: this.courseCount, name: '今日新增课程数' },
              { value: this.orderCount, name: '今日订单量' },
              { value: this.teacherCount, name: '今日新增讲师数' },
            ]
          }
        ]
      };
      this.chart.setOption(option)
    },
    //柱状图
    showHistogram(){
      this.chart = echarts.init(document.getElementById('chart'))
      var option = {
        title:{
          text: '近七天数据量统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['播放量', '订单量', '注册人数']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.date_calculatedList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '播放量',
            type: 'bar',
            barGap: 0,
            itemStyle: {
              color: 'rgb(110,135,207)' 
            },
            emphasis: {
              focus: 'series'
            },
            
            data: this.video_view_numList
          },
          {
            name: '订单量',
            type: 'bar',
            itemStyle: {
              color: 'rgb(145,204,117)' 
            },
            emphasis: {
              focus: 'series'
            },
            data: this.order_numList
          },
          {
            name: '注册人数',
            type: 'bar',
            itemStyle: {
              color: 'rgb(250,200,88)' 
            },
            emphasis: {
              focus: 'series'
            },
            data: this.register_numList
          },
        ]
      };
      this.chart.setOption(option)
    },
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
